<template>
    <div>
        <!-- 搜索筛选 -->
        <el-card class="box-card">
            <el-form :inline="true" :model="formInline" class="user-search">
                <el-form-item label="座席名称">
                    <el-input size="small" v-model="formInline.seatName" placeholder="请输入座席名称"></el-input>
                </el-form-item>
                <el-form-item label="座席状态">
                    <el-select v-model="formInline.status" placeholder="选择座席状态" size="small">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="座席号">
                    <el-input size="small" v-model="formInline.seatNum" placeholder="请输入座席号"></el-input>
                </el-form-item>
                <el-form-item label="外呼员工">
                    <el-select v-model="formInline.emp" placeholder="选择外呼员工" size="small">
                        <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" @click="search">查询</el-button>
                    <el-button size="small" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!--列表-->
        <el-card class="box-card">
            <div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
                <div>
                    <span style="color:rgb(40,55,139);">剩余数量</span>/<span>座席总数量 </span>
                    <span style="color:rgb(40,55,139); font-size:30px;">0</span>/<span style="font-size: 30px;">0</span>
                </div>
                <div>
                    <el-button @click="">删除</el-button>
                    <el-button icon="el-icon-plus" type="primary" @click="save()">新增座席</el-button>
                </div>
            </div>

            <el-table size="small" :data="listData" highlight-current-row v-loading="loading"
                      element-loading-text="拼命加载中" style="width: 100%;">
                <el-table-column v-if="false" prop="groupName" label="id" width="200">
                </el-table-column>
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="groupName" label="座席号" width="200">
                </el-table-column>
                <el-table-column prop="lordName" label="座席名称" width="150">
                </el-table-column>
                <el-table-column prop="groupTag" label="状态" width="150">
                </el-table-column>
                <el-table-column prop="PeopleNum" label="使用员工" width="150">
                </el-table-column>
                <el-table-column prop="join" label="外显号码" width="200">
                </el-table-column>
                <el-table-column prop="quit" label="绑定号码" width="200">
                </el-table-column>
                <el-table-column prop="quit" label="号码类型" width="150">
                </el-table-column>
                <el-table-column prop="quit" label="座席类型" width="150">
                </el-table-column>
                <el-table-column align="center" label="操作" min-width="150">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="delete(scope.row.id)" type="text">删除</el-button>
                        <el-button size="mini" @click="detail(scope.row.id)" type="text">详情</el-button>
                        <el-button size="mini" @click="save(scope.row.id)" type="text">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div style="display: flex; justify-content: flex-end;">
                <div style="width: 450px; height: 60px;">
                    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
                </div>
            </div>
        </el-card>


        <!-- save -->
        <el-dialog :title="title" :visible.sync="visible" width="30%" @click="close">
            <div class="center">
                <el-form :model="saveForm" label-width="70px">
                    <el-form-item label="座席号">
                        <el-input v-model="saveForm.seatNum" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="座席名称">
                        <el-input v-model="saveForm.seatNum" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="外显号码">
                        <el-select v-model="saveForm.showNum" placeholder="选择外呼员工">
                            <el-option
                                v-for="item in options1"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div>
                    <el-button size="mini" @click="close">取消</el-button>
                    <el-button size="mini" type="primary" @click="submit">确定</el-button>
                </div>
            </div>
        </el-dialog>

        <!-- 详情 -->
        <el-dialog title="座席详情" :visible.sync="detailVisible" width="30%" @click="close">
            <div class="center">
                <el-form :model="detailForm" label-width="70px">
                    <el-form-item label="座席号">
                        <el-input readonly v-model="detailForm.seatNum"></el-input>
                    </el-form-item>
                    <el-form-item label="座席名称">
                        <el-input readonly v-model="detailForm.seatNum"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-input readonly v-model="detailForm.seatNum"></el-input>
                    </el-form-item>
                    <el-form-item label="使用员工">
                        <el-input readonly v-model="detailForm.seatNum"></el-input>
                    </el-form-item>
                    <el-form-item label="外显号码">
                        <el-input readonly v-model="detailForm.seatNum"></el-input>
                    </el-form-item>
                    <el-form-item label="绑定号码">
                        <el-input readonly v-model="detailForm.seatNum"></el-input>
                    </el-form-item>
                    <el-form-item label="号码类型">
                        <el-input readonly v-model="detailForm.seatNum"></el-input>
                    </el-form-item>
                    <el-form-item label="座席类型">
                        <el-input readonly v-model="detailForm.seatNum"></el-input>
                    </el-form-item>
                </el-form>
                <div style="width: 60%;">
                    <el-button size="mini" type="primary" @click="close">返回</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination'

import ElementUI from 'element-ui'
// 修改 el-dialog 默认点击遮照为不关闭
ElementUI.Dialog.props.closeOnClickModal.default = false;

export default {
    data() {
        return {
            // 列表数据
            listData: [],
            // 是否加载
            loading: false,
            // 弹窗页标题
            title: '',
            // save弹窗显示
            visible: false,
            // 详情页显示
            detailVisible: false,
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 10,
                total: 0
            },
            // 搜索条件
            formInline: {
                seatName: '',
                status: '',
                seatNum: '',
                emp: '',
                page: '',
                limit: ''
            },
            // save数据
            saveForm: {
                seatNum: '',
                seatName: '',
                showNum: ''
            },
            // 详情数据
            detailForm: {

            },
            // 座席状态下拉选项
            options: [
                {
                    value: '0',
                    label: '正常'
                },
                {
                    value: '1',
                    label: '关闭'
                },
            ],
            // 外呼员工下拉选项
            options1: [
                {
                    value: '0',
                    label: '正常'
                },
                {
                    value: '1',
                    label: '关闭'
                },
            ]
        }
    },
    methods: {
        // 重置
        reset() {
          this.formInline.seatName = '';
          this.formInline.status = '';
          this.formInline.seatNum = '';
          this.formInline.emp = '';
        },
        // 查询
        search() {
            this.getdata(this.formInline)
        },
        // save
        save(id) {
            this.visible = true;
            if (undefined == id || null == id){
                this.title = '新增座席'
            } else {
                this.title = '修改座席'
            }
        },
        // 详情
        detail(id) {
            this.detailVisible = true;
        },
        // 删除
        delete(id) {
            this.$message({
                type: 'success',
                message: '删除!'
            })
        },
        // 关闭弹出框
        close() {
            this.visible = false;
            this.detailVisible = false;
        },
        // save提交
        submit() {
            this.visible = false
            this.$message({
                type: 'success',
                message: '操作成功!'
            })
        },
        // 分页插件事件
        callFather(parm) {
            // this.formInline.page = parm.currentPage
            // this.formInline.limit = parm.pageSize
            this.getdata(this.formInline)
        },
        // 数据展示
        getdata(parameter) {
            this.loading = true
            // 模拟数据开始
            let res = {
                code: 0,
                msg: null,
                count: 5,
                data: [
                    {
                        id: '123456',
                        groupName: '9527客户群',
                        lordName: '孙鑫雨',
                        groupTag: '客户群',
                    }
                ]
            }
            this.loading = false
            this.listData = res.data
            // this.pageparm.currentPage = this.formInline.page
            // this.pageparm.pageSize = this.formInline.limit
            this.pageparm.total = res.count
        },
    },
    // 注册组件
    components: {
        Pagination,
    },
    /**
     * 创建完毕
     */
    created() {
        this.getdata(this.formInline)
    },
}
</script>

<style scoped>
.el-card {margin-top: 15px;}
/deep/ .el-card__body {padding: 10px 12px;}

.el-card .el-form-item {margin-bottom: 0;}

/* 表格内背景颜色 */
/deep/ .el-table th {background-color: rgb(242,244,247); color: #666;}

.center{
    display: flex;/*设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效*/
    display: -webkit-flex; /* Safari */
    flex-direction: column;/*容器内项目的排列方向(默认横向排列 row)*/
    flex-wrap: nowrap;/*容器内项目换行方式*/
    justify-content: center;/*项目在主轴上的对齐方式*/
    align-items: center;/*项目在交叉轴上如何对齐*/
    align-content: center;/*定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用*/
}
</style>
